import { defineComponent } from 'vue'
import '@/views/index.scss'
import { useRouter } from 'vue-router'
import { Col, Row, Comment, Avatar } from 'ant-design-vue'

export default defineComponent({
  name: 'homeList',
  setup() {
    const router = useRouter()

    const ExampleComment = ({ children }: { children?: any }) => (
      <Comment
        actions={[<span key="comment-nested-reply-to">回复</span>]}
        author={<a>你的昵称</a>}
        avatar={
          <Avatar
            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            alt="Han Solo"/>
        }
        content={
          <p>
            这是一个评论组件适合嵌套的评论，支持多层嵌套。无限极嵌套，但是最好不要那样做，这样会损耗大部分性能。
          </p>
        }
      >
        {children}
      </Comment>
    )

    const A = <div><ExampleComment children={<ExampleComment></ExampleComment>}></ExampleComment><ExampleComment></ExampleComment></div>

    return () => (
      <div>
        <div>
          <h1>题目大标题大标题</h1>
          <Row>
            <Col span={20}>
              作者：防守打法
            </Col>
            <Col span={4}>
              时间：2020-11-27
            </Col>
          </Row>
          <div class="content">
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
          </div>
        </div>
        <div class="comment">
          <ExampleComment
            children={A}
          >
          </ExampleComment>
        </div>
      </div>
    )
  }
})
